<template>
  <MainContainer class="p-5">
    <div class="flex justify-between">
      <el-button type="primary" @click="openDialog()">+添加楼栋</el-button>
      <el-button
        type="primary"
        @click="toRouter('disinfect-map-management-elevator')"
        >电梯管理</el-button
      >
    </div>
    <div class="main">
      <div
        v-for="item in list"
        :key="item.id"
        v-loading="loading"
        data-test="building-item"
        class="item"
        @click="toRouter('disinfect-map-building-details', item.id)"
      >
        <img class="w-[3vw] select-none" :src="robot" />
        <div class="title">{{ item.name }}</div>
        <el-icon @click.stop="openDialog(item.id)"><Edit /></el-icon>
        <el-icon @click.stop="handleDelete(item.id)"><Delete /></el-icon>
      </div>
    </div>
    <MyFormDialog
      v-model:visible="dialogVisible"
      v-model:formData="formData"
      :title="dialogTitle"
      :options="createFormOptions"
      :loading="loading"
      @confirm="handleConfirm"
    ></MyFormDialog>
    <el-pagination
      v-model:currentPage="params.page"
      v-model:page-size="params.limit"
      :page-sizes="[4, 8, 12, 16]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="justify-end"
      @size-change="handleQuery"
      @current-change="handleQuery"
    />
  </MainContainer>
</template>
<script setup lang="jsx">
import useCRUD from "@/composables/useCRUD.js";
import MainContainer from "@/components/MainContainer.vue";
import MyFormDialog from "@/components/MyFormDialog.vue";
import robot from "@/assets/images/disinfect/building.png";
import { useRouter } from "vue-router";
import {
  createBuilding,
  getBuilding,
  updateBuilding,
  deleteBuilding,
  getBuildingDetail,
} from "@/api/building";

const createFormOptions = [
  {
    prop: "name",
    label: "请输入楼栋名称",
    rules: {
      required: true,
      message: "必填",
    },
  },
];

//路由跳转
let router = useRouter();
function toRouter(name, id) {
  if (id) {
    router.push({
      name,
      query: { id },
    });
  } else {
    router.push({
      name,
    });
  }
}

const crudOptions = {
  queryApi: getBuilding,
  createApi: createBuilding,
  deleteApi: deleteBuilding,
  updateApi: updateBuilding,
  getOneApi: getBuildingDetail,
};

const {
  params,
  handleQuery,
  list,
  loading,
  openDialog,
  dialogVisible,
  handleDelete,
  formData,
  dialogTitle,
  total,
  handleConfirm,
} = useCRUD(crudOptions);

handleQuery();
</script>
<style lang="scss" scoped>
.footer {
  bottom: 36px;
  right: 36px;
  position: absolute;
}

.main {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  .item {
    width: 24%;
    min-width: 240px;
    height: 88px;
    background: #f1f3fa;
    border-radius: 10px;
    margin: 0 1% 1% 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border: 1px solid #cccccc24;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

    div:nth-last-child(1) {
      margin-right: 0.35em;
    }

    .svg-icon {
      font-size: 42px;
    }

    .title {
      min-width: 100px;
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 200;
      color: #2b2b2b;
    }
  }
}
</style>
